<template>
  <div class="product">
    <!-- 点击编辑进入此页面时显示 修改产品信息 -->
    <div class="product-edit" v-if="have">
      <h3>修改产品信息</h3>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <h5>产品信息</h5>
        <hr>
        <div class="style-box">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="净价" prop="pure_price">
            <el-input v-model="form.pure_price"></el-input>
          </el-form-item>
          <el-form-item label="售价" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
        </div>
        <div class="style-box">
          <el-form-item label="折扣" prop="discount">
            <el-input v-model="form.discount"></el-input>
          </el-form-item>
          <el-form-item label="限度" prop="limit">
            <el-input v-model="form.limit"></el-input>
          </el-form-item>
        <el-form-item label="类型" prop="type" style="width: 200px;">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="中药" value="中药"></el-option>
            <el-option label="西药" value="西药"></el-option>
          </el-select>
        </el-form-item>
        </div>
        <div class="style-box">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>
          <el-form-item label="等级" prop="level">
            <el-input v-model="form.level"></el-input>
          </el-form-item>
          <el-form-item label="上架时间" prop="sale_stime">
            <el-col :span="11">
              <el-date-picker 
                type="date" 
                placeholder="选择日期" 
                v-model="form.sale_stime" 
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="下架时间" prop="sale_etime">
            <el-col :span="11">
              <el-date-picker format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                type="date" 
                placeholder="选择日期" 
                v-model="form.sale_etime">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </div>
        <div class="style-box">
          <el-form-item label="产地" prop="place">
            <el-input v-model="form.place"></el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-input v-model="form.brand"></el-input>
          </el-form-item>
        </div>
        
        <el-form-item label="详情图" prop="detail">
          <el-upload
            class="upload-demo"
            drag
            :headers="{'X-Token':this.$store.getters['common/token'] }"
            :on-success="onSuccesss"
            action="http://www.shuiyue.info:21000/file/upload/product"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图" prop="banner">
          <el-upload
            class="upload-demo"
            drag
            :headers="{'X-Token':this.$store.getters['common/token'] }"
            :on-success="onBanner"
            action="http://www.shuiyue.info:21000/file/upload/product"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注" style="width: 600px;">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      <fieldset class="bottom">
        <legend>辅料信息</legend>
        <el-form :model="info" ref="info" :rules="rules">
          <div class="style-box">
            <el-form-item label="ID" prop="detail_id">
              <el-input v-model="info.detail_id"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="info.name"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="count">
              <el-input v-model="info.count"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="info.price"></el-input>
            </el-form-item>
          </div>
          <div class="style-box">
            <el-form-item label="供应商" prop="supplier_name">
              <el-input v-model="info.supplier_name"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type" style="width: 200px;">
              <el-select v-model="info.type" placeholder="请选择类型">
                <el-option label="中药" value="shanghai"></el-option>
                <el-option label="西药" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
              <el-input v-model="info.unit"></el-input>
            </el-form-item>
            <el-form-item label="等级" prop="level">
              <el-input v-model="info.level"></el-input>
            </el-form-item>
          </div>
          <div class="style-box">
            <el-form-item label="产地" prop="place">
              <el-input v-model="info.place"></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="info.brand"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注" style="width: 600px;">
            <el-input type="textarea" v-model="info.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addInfo('info')">添加辅料信息</el-button>
            <el-button @click="clearInfo">重置</el-button>
          </el-form-item>
        </el-form>
      </fieldset>

        <el-table
          :data="form.list"
          style="width: 100%">
          <el-table-column
            prop="detail_id"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="supplier_name"
            label="供应商">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="unit"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="level"
            label="等级">
          </el-table-column>
          <el-table-column
            prop="place"
            label="产地">
          </el-table-column>
          <el-table-column
            prop="brand"
            label="品牌">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注">
          </el-table-column>
        </el-table>

          <el-form-item>
            <el-button type="primary" @click="updateProduct">完成</el-button>
            <el-button>取消</el-button>
          </el-form-item>
      </el-form>
    </div>
    <!-- 修改信息！！！！ -->

    <!-- 新增产品！！！！ -->
    <div class="product-edit" v-else>
      <h3>产品新增</h3>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <h5>产品信息</h5>
        <hr>
        <div class="style-box">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="净价" prop="pure_price">
            <el-input v-model="form.pure_price"></el-input>
          </el-form-item>
          <el-form-item label="售价" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
        </div>
        <div class="style-box">
          <el-form-item label="折扣" prop="discount">
            <el-input v-model="form.discount"></el-input>
          </el-form-item>
          <el-form-item label="限度" prop="limit">
            <el-input v-model="form.limit"></el-input>
          </el-form-item>
        <el-form-item label="类型" prop="type" style="width: 200px;">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="中药" value="中药"></el-option>
            <el-option label="西药" value="西药"></el-option>
          </el-select>
        </el-form-item>
        </div>
        <div class="style-box">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>
          <el-form-item label="等级" prop="level">
            <el-input v-model="form.level"></el-input>
          </el-form-item>
          <el-form-item label="上架时间" prop="sale_stime">
            <el-col :span="11">
              <el-date-picker 
                type="date" 
                placeholder="选择日期" 
                v-model="form.sale_stime" 
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="下架时间" prop="sale_etime">
            <el-col :span="11">
              <el-date-picker format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                type="date" 
                placeholder="选择日期" 
                v-model="form.sale_etime">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </div>
        <div class="style-box">
          <el-form-item label="产地" prop="place">
            <el-input v-model="form.place"></el-input>
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-input v-model="form.brand"></el-input>
          </el-form-item>
        </div>
        
        <el-form-item label="详情图" prop="detail">
          <el-upload
            class="upload-demo"
            drag
            :headers="{'X-Token':this.$store.getters['common/token'] }"
            :on-success="onSuccesss"
            action="http://www.shuiyue.info:21000/file/upload/product"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图" prop="banner">
          <el-upload
            class="upload-demo"
            drag
            :headers="{'X-Token':this.$store.getters['common/token'] }"
            :on-success="onBanner"
            action="http://www.shuiyue.info:21000/file/upload/product"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注" style="width: 600px;">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      <fieldset class="bottom">
        <legend>辅料信息</legend>
        <el-form :model="info" ref="info" :rules="rules">
        <!-- <h5>辅料信息</h5> -->
          <div class="style-box">
            <el-form-item label="ID" prop="detail_id">
              <el-input v-model="info.detail_id"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="info.name"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="count">
              <el-input v-model="info.count"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="info.price"></el-input>
            </el-form-item>
          </div>
          <div class="style-box">
            <el-form-item label="供应商" prop="supplier_name">
              <el-input v-model="info.supplier_name"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type" style="width: 200px;">
              <el-select v-model="info.type" placeholder="请选择类型">
                <el-option label="中药" value="shanghai"></el-option>
                <el-option label="西药" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
              <el-input v-model="info.unit"></el-input>
            </el-form-item>
            <el-form-item label="等级" prop="level">
              <el-input v-model="info.level"></el-input>
            </el-form-item>
          </div>
          <div class="style-box">
            <el-form-item label="产地" prop="place">
              <el-input v-model="info.place"></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="info.brand"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注" style="width: 600px;">
            <el-input type="textarea" v-model="info.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addInfo('info')">添加辅料信息</el-button>
            <el-button @click="clearInfo">重置</el-button>
          </el-form-item>
        </el-form>

        </fieldset>

        <el-table
          :data="form.list"
          style="width: 100%">
          <el-table-column
            prop="detail_id"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="supplier_name"
            label="供应商">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="unit"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="level"
            label="等级">
          </el-table-column>
          <el-table-column
            prop="place"
            label="产地">
          </el-table-column>
          <el-table-column
            prop="brand"
            label="品牌">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注">
          </el-table-column>
        </el-table>

          <el-form-item>
            <el-button type="primary" @click="addProduct('form')">新增</el-button>
            <el-button>取消</el-button>
          </el-form-item>
      </el-form>
    </div>
    <!-- 新增产品！！！！ -->
  </div>
</template>

<script>
  import { regionData, CodeToText } from "element-china-area-data";
  import { addProductApi, updateProductApi } from '../../../apis/productApi';
    export default {
      data() {
        return {
          have: false,
          info:{
            detail_id: '',
            name: '',
            count: '',
            price: '',
            supplier_name: '',
            type: '',
            unit: '',
            level: '',
            place: '',
            brand: '',
            remark: ''
          },
          form: {
            list: [],
            name: '',
            state: 'new',
            pure_price: '',
            price: '',
            discount: '',
            limit: '',
            sale_stime: '',
            sale_etime: '',
            type: '',
            unit: '',
            level: '',
            place: '',
            brand: '',
            detail: '',
            banner: '',
            remark: ''
          },
          rules: {
            detail_id:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            supplier_name:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            count:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            list:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            name:[
              { required: true, message: '该项目为必传', trigger: 'change' },
            ],
            state:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            pure_price:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            price:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            discount:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            limit:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            sale_stime:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            sale_etime:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            type:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            unit:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            level:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            place:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            brand:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            detail:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            banner:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
            remark:[
              { required: true, message: '该项目为必传', trigger: 'blur' },
            ],
          }
        }
      },
      created(){
        let product = JSON.parse(localStorage.getItem('product'))
        if(!!product){
          this.have = true
          this.form = {
            list: product.list,
            name: product.name,
            state: product.state === 'new' ? '新增' : product.state === 'sales' ? '销售中' : '下架',
            pure_price: product.pure_price,
            price: product.price,
            discount: product.discount,
            limit: product.limit,
            sale_stime: product.sale_stime,
            sale_etime: product.sale_etime,
            type: product.type,
            unit: product.unit,
            level: product.level,
            place: product.place,
            brand: product.brand,
            detail: product.detail,
            banner: product.banner,
            remark: product.remark
          }
        }
        if(!product){
          this.have = false
        }
        
      },

      destroyed() {
        localStorage.removeItem('product')
      },
      
      methods: {
        // 图片上传回调
        onSuccesss(data){
          if(data.code === 200){
            console.log(data);
            this.form.detail = data.data[0].path
          }
        },
        onBanner(data){
          if(data.code === 200){
            console.log(data);
            this.form.banner = data.data[0].path
          }
        },

        // 产品新增
        addProduct(form) {
          this.$refs[form].validate((valid) => {
            if (valid) {
              console.log(this.form);
              addProductApi(this.form).then(res => {
                console.log(res);
                if(res.code === 200){
                  this.$message.success('产品新增成功')
                  form = {
                    list: [],
                    name: '',
                    state: 'new',
                    pure_price: '',
                    price: '',
                    discount: '',
                    limit: '',
                    sale_stime: '',
                    sale_etime: '',
                    type: '',
                    unit: '',
                    level: '',
                    place: '',
                    brand: '',
                    detail: '',
                    banner: '',
                    remark: ''
                  }
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
        },
        addInfo(form){
          this.$refs[form].validate((valid) => {
            if (valid) {
              console.log('add');
              this.form.list.push(this.info)
              console.log(this.form);
              this.clearInfo()
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          
        },
        clearInfo(){
          this.info = {
            detail_id: '',
            name: '',
            count: '',
            price: '',
            supplier_name: '',
            type: '',
            unit: '',
            level: '',
            place: '',
            brand: '',
            remark: ''
          },
          console.log('clear');
        },
        // 完成编辑
        updateProduct(){
          this.form.id = JSON.parse(localStorage.getItem('product')).id
          this.form.list = []
          updateProductApi(this.form).then(res => {
            if(res.code === 200){
              localStorage.removeItem('product')
            }
          })
        }
      }
    }
</script>

<style lang="less" scoped>
.product{
  .product-edit{
    width: 100%;
    height: calc(100vh - 57px);
    overflow-x: hidden;
    background-color: rgb(247, 247, 247);
    h3{
      text-align: center;
      color: #333;
    }
    .el-form, .aaa{
      width: calc(100% - 40px);
      padding: 10px 20px;
      .style-box{
        width: 100%;
        display: flex;
        justify-content: start;
        .el-form-item ::v-deep{
          width: 300px;
          .el-form-item__label{
            .el-form-item__content{
              margin-left: 0;
            }
          }
        }
      }
      .picture{
        width: 45%;
        height: 150px;
        border: 1px solid #ddd;
      }
      .bottom{
        padding: 20px;
        border: 2px dashed #ddd;
        legend{
          color: #666;
          padding: 0 10px;
          text-align: center;
        }
      } 
    }
  }
}

  
  
</style>